<template>
  <div>
    <el-dialog
      @close="cancel"
      :title="title"
      :visible.sync="showMapModal"
      width="80%"
    >
      <div ref="container" style="height: 500px"></div>
      <span slot="footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="ok">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
const KEY = "UEVBZ-P2PWX-B6A44-7LCQQ-XTKCS-QVB5T";
const defaultLatlng = {
  lat: 30.57698,
  lng: 104.07913,
};
let marker;

import { getAddress, getLatAndLng, getLatAndLngByIp } from "@/api/common";
export default {
  props: ["value", "address"],
  data() {
    return {
      showMapModal: false,
      title: "选择地址",
      location: {},
    };
  },

  methods: {
    // 根据位置获取经纬度
    async setLatAndLng(map) {
      let position = defaultLatlng;
      const res = await getLatAndLng({
        address: this.address,
      });
      if (res.data) {
        position = res.data.location;
        position = new qq.maps.LatLng(position.lat, position.lng);
        map.setCenter(position); // 设置中心点
        if (!marker) {
          marker = new qq.maps.Marker({
            position,
            map,
          });
        }
      }
    },

    // 通过ip获取经纬度
    async setLatAndLngByIp(map) {
      let position = defaultLatlng;
      // 搜狐的ip获取方式
      const res = await getLatAndLngByIp();
      if (res.data) {
        position = res.data.location;
        position = new qq.maps.LatLng(position.lat, position.lng);
        map.setCenter(position); // 设置中心点
        if (!marker) {
          marker = new qq.maps.Marker({
            position,
            map,
          });
        }
      }
    },

    // 根据经纬度设置当前选择的位置
    async setAddress(event) {
      this.location.lat = event.latLng.lat;
      this.location.lng = event.latLng.lng;
      const res = await getAddress({
        lat: event.latLng.lat,
        lng: event.latLng.lng,
      });
      if (res.data) {
        this.title = `当前选择地址：${res.data.address}`;
        this.location.address = res.data.address;
      } else {
        this.$message({
          type: "warning",
          message: "获取位置失败，请重新选择",
        });
      }
    },
    initMap() {
      const map = new qq.maps.Map(this.$refs.container, {
        center: new qq.maps.LatLng(defaultLatlng.lat, defaultLatlng.lng),
        zoom: 13,
      });

      // 如何已经存在地址了，则在地图上显示出来
      if (this.address) {
        this.setLatAndLng(map);
      } else {
        // 如何没有地址，则根据ip定位来设置显示
        this.setLatAndLngByIp(map);
      }
      
      // 点击地图添加maker
      qq.maps.event.addListener(map, "click", (event) => {
        marker.setPosition(event.latLng);
        this.setAddress(event);
      });
    },
    cancel() {
      this.title = "选择地址";
      this.showMapModal = false;
      marker = null;
      this.$emit("input", false);
    },
    ok() {
      this.$emit("ok", this.location);
      this.cancel();
    },
  },
  watch: {
    value(val) {
      this.showMapModal = val;
      if (val) {
        setTimeout(() => {
          this.initMap(); // 不延时地图加载不出来
        }, 500);
      }
    },
  },
};
</script>